<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slot content extend Demo</title>
</head>
<body>
<h1>Slot content extend Demo</h1>
<hr>
<div id="app">
    <jspang>
        <span slot="blogurl">{{jspangData.blogurl}}</span>
        <span slot="netname">{{jspangData.netname}}</span>
        <span slot="skill">{{jspangData.skill}}</span>
    </jspang>
</div>
<template id="tmp">
    <div>
        <p>博客地址:
            <slot name="blogurl"></slot>
        </p>
        <p>博客名称:
            <slot name="netname"></slot>
        </p>
        <p>技术方向:
            <slot name="skill"></slot>
        </p>
    </div>
</template>
<script type="text/javascript" src="../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    var jspang = {
        template: '#tmp'
    };
    var app = new Vue({
        el: '#app',
        data: {
            jspangData: {
                blogurl: 'http://www.baidu.com',
                netname: '**********',
                skill: '学习vue'
            }
        },
        components: {
            "jspang": jspang
        }
    })
</script>
</body>
</html>